<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/common/taglibs.jsp"%>
<%@include file="/common/javascript.jsp" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>我的课表</title>
	
	<link href="${ctx}/static/jquery-week-calendar/css/smoothness/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/jquery-week-calendar/jquery.weekcalendar.css" rel="stylesheet" type="text/css"/>
    <script type='text/javascript' src='${ctx}/static/jquery-week-calendar/jquery-ui-1.8.11.custom.min.js'></script>
  	<script type='text/javascript' src='${ctx}/static/jquery-week-calendar/date.js'></script>
  	<script type='text/javascript' src='${ctx}/static/jquery-week-calendar/jquery.weekcalendar.js'></script>
	
	<style>
		#in { 
			text-align: left;
			text-vlign: center;
			left: 50px;
		}
		#btn { 
			text-align: center;
			right: 100px;
		}
	</style>
<script type="text/javascript">
	var $calendar;
	var dialog; 

	var eventData = { 
		events : <c:out value="${jsons}" escapeXml="false" />
	};
	
	var date = new Date();
	date.setHours(8);
	
	$(document).ready(function() {
		$calendar = $('#calendar').weekCalendar({
			date: date,
			businessHours: {start: 8, end: 21, limitDisplay: true},
      		timeslotsPerHour: 4,
      		scrollToHourMillis : 0, 
            textSize: 10,
            firstDayOfWeek : 1,
			showHeader: false,
            readonly: true,
			buttons: false,
			dateFormat: "Y年n月j日",
			timeFormat: "a h:i",
			timeSeparator: " - ",
      		height: function($calendar){   
        		return $(window).height() - $('p').outerHeight(true) - 48;
      		},
      		eventRender : function(calEvent, $event) {
        		if(calEvent.end.getTime() < new Date().getTime()) {
          			$event.css('backgroundColor', '#aaa');
          			$event.find('.time').css({'backgroundColor': '#999', 'border':'1px solid #888'});
        		}
   			}, 
   			eventClick : function(calEvent, $event) {  
      			if (typeof(calEvent.id) != 'undefined') { 
      				var parent=window.parent;
	      			dialog = parent.$.ligerDialog.open({url: '${ctx}/qso/mybtable/view/view?id='+calEvent.id,height:300, width:600, isHidden: false, showMax: false, showToggle: false, showMin: false, isResize: true, modal: true, title:"详细", onBeforeClose:
	      	    			function() {
	        				dialog.close(); 
	        				},
	      					buttons:[{text:"取消",onclick:function(item,d){
								dialog.close();
							}}]});
	      			}
		      },
		      data: function(start, end, callback){
		    	  callback(eventData);
		      }
		   });
		
		$('.prev').bind('click', function() {   
			if (parseInt($('#current').text()) > 1) { 
				var curWeek=parseInt($('#current').text() ) - 1;
				$('#current').text(curWeek);
				process(curWeek);
				$('#calendar').weekCalendar('prevWeek');
			}
		});
		
		$('.next').bind('click', function() { 
			if (parseInt($('#current').text()) < parseInt('${totalWeeks}')) { 
				var curWeek=parseInt($('#current').text() ) + 1;
				$('#current').text(curWeek);
				process(curWeek);
				$('#calendar').weekCalendar('nextWeek'); 
			}
		});
	});
	
	function process(curWeek){
		$.ajax({
			type:"POST",
			url:"${ctx}/qso/mybtable/refresh?currentWeek="+curWeek,
			success:function(data){
				eventData={events:eval('(' + data + ')')};
				$('#calendar').weekCalendar("refresh");
			}
		});
	}
</script>

</head>
<body style="padding:0px; overflow:hidden;"> 

	<div id='calendar' style="width: 98%"></div>
	<p>
		<div id="in" style="padding-top:10px; padding-left:10px;">${info }</div>
		<div id="btn">
			<button class="prev">&nbsp;&lt;&nbsp;</button>
  			第 <span id="current">${currentWeek}</span> 周 / 共 <span id="total">${totalWeeks}</span> 周 
  			<button class="next">&nbsp;&gt;&nbsp;</button>
		</div>
  	</p>
  	<div style="display: block;height: 10px;width: 98%"></div>
</body>
</html>
